//文件数据保存（fileData是对象）
var fileData = null
var loopPics = ['bai01.jpg','bai02.jpg','bai03.jpg','bai04.jpg','bai01.jpg'] 
        var index = 0                 //数组下标
        //自动轮播                 
        setInterval(function() {
            var myImg = document.getElementById('loopPic')         //自己定义变量找到img标签
            myImg.src = 'images/' + loopPics[index++]
            if(index > 3){
                index = 0
            }
        }, 3000);        //每3秒换一次照片
    

function showInfo(foodName){
//循环遍历现有的数据，条件判断，比对品牌名称是否一致
var strHTML = ''
for(var i = 0; i < fileData.data.length ; i++){
    //品牌相同时，组合数据，拼接innerHTML字符串
    if(fileData.data[i].title == foodName){
        strHTML = ` <h2>${fileData.data[i].title}</h2>
                        <div id="info">
                            <a href="user.html">
                                <img src="images/${fileData.data[i].touxiang}" alt="" class="touxiang">
                                <span>${fileData.data[i].names}</span>
                            </a>
                            <input type="button" value="+关注" class="guanzhu test">
                            <img src="images/bkongxin.PNG" alt="" class="xin">
                            <input type="button" value="收藏" class="collect test" onclick="coll()">
                        </div>
                        <div id="xiu">
                            <h3>${fileData.data[i].xiu}</h3>
                            <p>${fileData.data[i].titlep}</p>
                            <span class="span1">${fileData.data[i].time}</span>
                        </div>
                        <div id="discuss">
                            <h3>评论</h3>
                            <div class="d1">
                                <img src="images/btouxiang13.PNG"><span>${fileData.data[i].pinglunname1}</span>
                                <p>${fileData.data[i].pinglun1}</p>
                                <span class="span2">${fileData.data[i].time}</span>
                                <hr>
                            </div>
                            <div class="d1">
                                <img src="images/btouxiang11.PNG"><span>${fileData.data[i].pinglunname2}</span>
                                <p>${fileData.data[i].pinglun2}</p>
                                <span class="span2">${fileData.data[i].time}</span>
                                <hr>
                            </div>
                            <div class="d1">
                                <img src="images/btouxiang12.PNG"><span>${fileData.data[i].pinglunname3}</span>
                                <p>${fileData.data[i].pinglun3}</p>
                                <span class="span2">${fileData.data[i].time}</span>
                            </div>
                        </div>`
        }
        //品牌不同时，跳过
    }
    document.querySelector('#information').innerHTML = strHTML
}

        window.onload = function(){
            //1.读取文件数据（文件数据保存在fileData中）,result是一个object对象，object的值才是要用的
            $.get('json/ontesChild.json',function(result){
                fileData = result
                console.log(result)
            })

            var lis = document.getElementsByTagName('li')    //获取所有列表项
            for(var i = 0;i  < lis.length;i++){
                //手动轮播
                lis[i].onclick = function(){
                    var myImg = document.getElementById('loopPic')
                    var currentIndex = this.innerHTML      //获取点击标签内部的内容
                    index = currentIndex
                    myImg.src = 'images/' + loopPics[currentIndex - 1]
                }
            }
            $('.guanzhu').on('click',function(){
                if($('.guanzhu').hasClass('test')){
                    $('.guanzhu').removeClass('test').addClass('active');
                    $('.guanzhu').val("已关注")
                }else if($('.guanzhu').hasClass('active')){
                    $('.guanzhu').removeClass('active').addClass('test');
                    $('.guanzhu').val("+关注")
                }
            })
            $('.xin').on('click',function(){
                if($('.xin').attr("src") == 'images/bkongxin.PNG'){
                    $('.xin').attr("src","images/bhongxin.PNG")
                }else if($('.xin').attr("src") == 'images/bhongxin.PNG'){
                    $('.xin').attr("src","images/bkongxin.PNG")
                }
            })
            $('.collect').on('click',function(){
                if($('.collect').hasClass('test')){
                    $('.collect').removeClass('test').addClass('active');
                    $('.collect').val("已收藏")
                }else if($('.collect').hasClass('active')){
                    $('.collect').removeClass('active').addClass('test');
                    $('.collect').val("收藏")
                }
            })
            //添加评论
            var comment
            var discuss = document.getElementById('discuss')
            var publish = document.getElementById('publish')
            var ping = document.getElementById('ping')
            publish.onclick = function(){
                comment = ping.value
                var newDiv1 = document.createElement('div')
                newDiv1.className = "d1"
                newDiv1.innerHTML = `<hr>
                                    <img src="images/default.jpg"><span class="span3">userName</span>
                                    <p>`+comment+`</p>
                                    <span class="span2">1天前</span>`
                discuss.appendChild(newDiv1)
                ping.value = ""

                //获取姓名
                var userInfo1=[]
                if( localStorage['userInfo']){
                    userInfo1=JSON.parse(localStorage['userInfo'])
                    document.querySelector('.span3').innerHTML=userInfo1[0].name
                }
                
            }

            var Info=document.querySelectorAll('#info>a>span')
        for(var i=0;i<Info.length;i++){
       Info[i].onclick=function(){
                    var person=this.innerHTML
                    localStorage['person']=JSON.stringify([{"person":person}])
                    location.href="user.html"

                }
            
        }
            
        }